<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script>
        $(function () {
            //为对象绑定单个事件 获得多个对象 为每个对象都绑定事件
            // $("input").click(function () {
            //     $("p").css("background-color", "red");
            // });

            //使用绑定事件的方法来绑定 on()(推荐) live() bind() delegate()
            // $("input").on(事件名,操作);
            // $("input").on("click", function () {
            //     $("p").css("background-color", "red");
            // });

            // $("input").on("mouseover", function () {
            //     $("p").css("background-color", "red");
            // });

            //绑定事件的目录是当一个对象有多种事件的操作时比较方便和直观
            //为对象绑定多个事件
            $("p").on({
                //事件1:操作1
                click: function () {
                    $(this).css("background-color", "red");
                },

                //事件2:操作2  注意：涉及子元素在父元素中影响效果参看mouseleave() mouseenter()
                mouseover: function () {
                    $(this).css("background-color", "yellow");
                },

                //事件3:操作3
                mouseout: function () {
                    $(this).css("background-color", "green");
                }
            });


        });


    </script>
</head>

<body>
    <p style="width: 100px; height: 100px; background-color: aqua;">这里是内容</p>
    <input type="button" value="绑定事件">

</body>

</html>